<template>
    <div class="container">
        <div class="main">
            <div class="pay-title">
                支付总金额 <span class="pay-price">￥ {{ orderDetail.price }}}</span>
            </div>
            <div class="pay-main">
                <h4>微信支付</h4>
                <el-row type="flex" 
                justify="space-between" 
                align="middle"
                class="pay-qrcode">
                    <div class="qrcode">
                        <!-- 二维码 -->
                        <canvas id="qrcode-stage"></canvas>
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                    <div class="pay-example">
                        <img src="http://fe-xianyun-web.itheima.net/images/wx-sweep2.jpg" alt="">
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 目标：生成一个支付二维码
 * 实现步骤
 * 1、根据订单id获取订单详情
 * 2、根据订单详情生成支付二维码（qrcode插件来实现）
 *  2-1、下载插件： npm i qrcode
 *  2-2、引入插件
 *  2-3、根据插件的语法生成二维码
 * */ 
import QRCode from 'qrcode'
export default {
    data(){
        return {
            orderDetail: {
                // 订单详情
            },
            timer: null // 定时器
        }
    },
    mounted(){
       console.log('订单id',this.$route.query.id); 
       this.$axios({
        url: '/airorders/'+this.$route.query.id,
        headers: {
            Authorization: 'Bearer '+ this.$store.state.user.userInfo.token
        }
       }).then(res=>{
        console.log('订单详情:',res);
        this.orderDetail = res.data // 保存订单详情
        // 获取渲染二维码的标签
        let canvas = document.getElementById('qrcode-stage')
        QRCode.toCanvas(canvas, res.data.payInfo.code_url,{
            width: 200
        })
        // 轮询：通过定时器每隔3秒调用函数 检查用户是否已完成支付
        this.timer = setInterval(()=>{
            this.checkpay()
        },3000)
       })
    },
    methods:{
        checkpay(){
            this.$axios({
                url: '/airorders/checkpay',
                method: 'post',
                data: {
                    id: this.orderDetail.id,
                    nonce_str: this.orderDetail.payInfo.nonce_str,
                    out_trade_no: this.orderDetail.payInfo.order_no
                },
                headers: {
                    Authorization: 'Bearer '+ this.$store.state.user.userInfo.token
                }
            }).then(res=>{
                console.log(78,'付款状态',res);
                if(res.data.statusTxt === '支付完成'){
                    // 结束轮询 ---- 清除定时器
                    clearInterval(this.timer)
                    // 提示用户 并跳转到首页
                    this.$message.success(res.data.statusTxt)
                    this.$router.push('/')
                }
            })
        }
    },
    // 跳转其他页面的时候会触发
    destroyed(){
        // 结束轮询 ---- 清除定时器 --- 防止用户不支付直接跳转
        clearInterval(this.timer)
    }
}
</script>

<style scoped lang="less">
.container{
    background:#f5f5f5;
    padding: 30px 0;

    .main{
        width:1000px;
        margin:0 auto;

        .pay-title{
            text-align: right;
            span{
                font-size:28px;
                color:orangered;
            }
        }

        .pay-main{
            background:#fff;
            margin-top:10px;
            border-top: 5px orange solid;
            padding:30px;

            h4{
                font-size: 28px;
                font-weight: normal;
                margin-bottom: 10px;
            }

            .pay-qrcode{
                padding:0 80px;
            }

            .qrcode{
                border:1px #ddd solid;
                padding:15px;
                height: fit-content;

                #qrcode-stage{
                    width:200px;
                    height:200px;
                    margin-bottom: 10px;
                }

                p{
                    line-height: 2;
                    text-align: center;
                }
            }
        }
    }
}
</style>